{% extends 'base.html' %}
{% block title %}{{ _('注册') }}{% endblock %}
{% block content %}
<div class="max-w-md mx-auto px-4 py-8">
  <h1 class="text-xl font-semibold mb-4">{{ _('注册') }}</h1>
  <form method="post" novalidate>
    {{ form.csrf_token }}
    <div class="space-y-3">
      <div>
        <label class="block text-sm mb-1">{{ _('用户名') }}</label>
        {{ form.username(class="w-full border rounded px-3 py-2") }}
        <p class="text-xs text-gray-500">{{ _('字母或字母+数字，4-32位，须字母开头') }}</p>
      </div>
      <div>
        <label class="block text-sm mb-1">{{ _('邮箱') }}</label>
        {{ form.email(class="w-full border rounded px-3 py-2") }}
      </div>
      <div>
        <label class="block text-sm mb-1">{{ _('密码') }}</label>
        {{ form.password(class="w-full border rounded px-3 py-2") }}
      </div>
      <div>
        <label class="block text-sm mb-1">{{ _('确认密码') }}</label>
        {{ form.confirm(class="w-full border rounded px-3 py-2") }}
      </div>
      <div>
        <label class="block mb-1 text-sm">{{ _('收件人姓名') }}</label>
        {{ form.recipient_name(class_='w-full border rounded px-3 py-2') }}
        {% for e in form.recipient_name.errors %}<p class="text-red-600 text-xs mt-1">{{ e }}</p>{% endfor %}
      </div>

      <div class="mt-3">
        <label class="block mb-1 text-sm">{{ _('联系电话') }}</label>
        {{ form.phone(class_='w-full border rounded px-3 py-2') }}
        <p class="text-xs text-gray-500 mt-1">{{ _('请包含国家区号，例如 +86 138… 或 +1 415…') }}</p>
        {% for e in form.phone.errors %}<p class="text-red-600 text-xs mt-1">{{ e }}</p>{% endfor %}
      </div>

      <div class="mt-3">
        <label class="block mb-1 text-sm">{{ _('邮编') }}</label>
        {{ form.postal_code(class_='w-full border rounded px-3 py-2') }}
        {% for e in form.postal_code.errors %}<p class="text-red-600 text-xs mt-1">{{ e }}</p>{% endfor %}
      </div>

      <div>
        <label class="block text-sm mb-1">{{ _('收货地址') }}</label>
        {{ form.shipping_address(class="w-full border rounded px-3 py-2", rows="3") }}
      </div>

      <button class="mt-2 px-4 py-2 rounded bg-emerald-600 text-white">{{ _('注册') }}</button>
    </div>
  </form>
  <p class="mt-3 text-sm">
    {{ _('已有账号？') }} <a href="{{ url_for('front.login', next=request.args.get('next')) }}" class="text-emerald-700">{{ _('去登录') }}</a>
  </p>
</div>
{% endblock %}
